<template>
	<view>
		<view class="flex-col page">
			<view class="flex-row items-center section_3">
				<u-search placeholder="请输入关键词搜索" v-model="selectInfo" :show-action="false"
					style="width: 560rpx;"></u-search>
				<view class="flex-col justify-start items-center shrink-0 text-wrapper ml-15" @click="cread()">
					<text class="font_2 text_3">搜索</text>
				</view>
			</view>
			<view class="flex-row section_5">
				<view class="flex-row items-center" @click="sales">
					<text class="font">销量</text>
					<image v-if="salesVolume=='asc'" class="shrink-0 image_5 ml-1-5" src="@/static/img/botom.png" />
					<image v-if="salesVolume=='desc'" class="shrink-0 image_5 ml-1-5" src="@/static/img/top.png" />
				</view>
				<!-- <view class="flex-row items-center ml-62">
		      <text class="font">销量</text>
		      <image
		        class="shrink-0 image_5 ml-1-5"
		        src="@/static/img/top.png"
		      />
		    </view> -->
			</view>
			<view style="display: flex;flex-wrap: wrap;margin-left:5rpx;">
				<view class="flex-col grid-item"
					style="width: 337rpx;height: 535rpx;margin-left: 20rpx;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-top: 20rpx;"
					v-for="(item,i) in items" @click="toDetails(item)" :key="i">
					<view class="flex-col justify-start items-center self-stretch image-wrapper_4">
						<image class="image_11" :src="item.photoUrlId" />
					</view>
					<text class="self-start font_3 text_4">{{item.productName}}</text>
					<view class="flex-row justify-between items-center self-stretch group">
						<view class="group_4">
							<text class="font_5">¥</text>
							<text class="font_4">{{item.productPrice}}</text>
						</view>
						<text class="font_2">库存{{item.inventory}}</text>
					</view>
					<view class="flex-col justify-start items-start self-stretch section_6" v-if="sheShow==1">
						<text class="font_7 text_6">{{item.shopName}}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				height: 0,
				items: [],
				sheShow: 0,
				selectInfo: '',
				salesVolume: 'asc',
				pageNum: 1
			}
		},
		onShow() {
			this.sheShow = uni.getStorageSync("sheShow");
			this.cread()
		},
		onReachBottom() {
			this.pageNum++
			this.cread()
		},
		methods: {
			sales() {
				if (this.salesVolume == 'asc') {
					this.salesVolume == 'desc'
				} else {
					this.salesVolume == 'asc'
				}
				this.cread()
			},
			async cread() {
				let sort = {
					salesVolume: this.salesVolume
				}
				let res = await this.$request('mall/product/list', {
					pageNum: this.pageNum,
					pageSize: 10,
					sort: JSON.stringify(sort),
					selectInfo: this.selectInfo
				})
				if (this.pageNum > 1) {
					if (res.data.length > 0) {
						this.items = this.items.concat(res.data)
					} else {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						this.pageNum = this.pageNum - 1; //请求下一页
					}
				} else {
					this.items = res.data
				}
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/shop/shopList/shopList?id=' + item.id + '&shopId=' + item.shopId
				})
			},
			openShow() {
				uni.navigateTo({
					url: '/subPackages/shop/shop'
				})
			},
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>
<style scoped>
	.ml-8-5 {
		margin-left: 17rpx;
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.ml-1-5 {
		margin-left: 3rpx;
	}

	.page {
		background-color: #f8fbff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section_3 {
		padding: 10rpx 30rpx;
		background-color: #ffffff;
	}

	.section_4 {
		padding: 17rpx 28rpx;
		background-color: #f8f8f8;
		border-radius: 16rpx;
		height: 68rpx;
	}

	.image_4 {
		width: 34rpx;
		height: 34rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 26rpx;
		color: #333333;
	}

	.text_2 {
		color: #999999;
	}

	.text-wrapper {
		padding: 20rpx 0 21rpx;
		background-color: #1295ff;
		border-radius: 16rpx;
		width: 100rpx;
		height: 64rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 23rpx;
		color: #afafaf;
	}

	.text_3 {
		color: #ffffff;
		font-weight: 500;
	}

	.section_5 {
		padding: 29rpx 41rpx 32rpx;
		background-color: #ffffff;
	}

	.image_6 {
		width: 14rpx;
		height: 11rpx;
	}

	.image_5 {
		width: 14rpx;
		height: 24rpx;
	}

	.grid {
		margin-top: 20rpx;
		padding: 15rpx 30rpx 0;
		height: 535rpx;
		display: grid;
		grid-template-rows: repeat(3, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 16rpx;
		column-gap: 16rpx;
	}

	.grid-item {
		padding-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.image-wrapper_4 {
		background-image: url('https://ide.code.fun/api/image?token=683e4ee3797f850011045914&name=0b9a45de5dd57652676d1d2a1c8cd47d.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_11 {
		width: 338rpx;
		height: 338rpx;
		border-radius: 12rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 20rpx;
		font-weight: 500;
		color: #333333;
	}

	.text_4 {
		margin-left: 16rpx;
		margin-top: 23rpx;
	}

	.group {
		margin-top: 32rpx;
		padding-left: 15rpx;
		padding-right: 14rpx;
	}

	.group_4 {
		line-height: 23rpx;
		height: 23rpx;
	}

	.font_5 {
		font-size: 20rpx;
		font-family: PingFangSC;
		line-height: 15rpx;
		color: #ff6300;
	}

	.font_4 {
		font-size: 30rpx;
		font-family: PingFangSC;
		line-height: 23rpx;
		font-weight: 500;
		color: #ff6300;
	}

	.section_6 {
		margin: 17rpx 15rpx 0;
		padding: 11rpx 0 12rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
	}

	.font_7 {
		font-size: 22rpx;
		font-family: PingFangSC;
		line-height: 21rpx;
		color: #999999;
	}

	.text_6 {
		margin-left: 13rpx;
	}

	.image-wrapper_5 {
		padding: 55rpx 0 33rpx;
		background-image: url('https://ide.code.fun/api/image?token=683e4ee3797f850011045914&name=0b9a45de5dd57652676d1d2a1c8cd47d.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_10 {
		width: 266rpx;
		height: 250rpx;
	}
</style>